<!-- 普通用户 -->
<template>
  <div>
    <!-- 新增按钮-->
    <el-row class="Btns">
      <el-button type="primary" plain @click="dialogformvisible = true"
        ><i class="el-icon-plus"></i><span>新增</span></el-button
      >
    </el-row>
    <!-- 新增用户 -->
     <UserDialog
      title="添加商家"
      :visible.sync="dialogformvisible"
      refName="addUser"
      :ruleForm="ruleForm"
      :loading.sync="loading"
      :disable="!disable"
    ></UserDialog>
    <!-- 修改用户 -->
    <UserDialog
      title="修改"
      :visible.sync="dialogFormVisibleChange"
      refName="changeUser"
      :ruleForm="change_user"
      :loading.sync="loading"
      :disable="disable"
    ></UserDialog>
   <!-- 信息表格 -->
    <TableData :visible.sync="dialogFormVisibleChange"></TableData>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.number + 1"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="page.total_elements"
        v-if="page.total_elements != 0"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
//引入vuex
import { mapState, mapActions } from "vuex";
//引入模块
import TableData from '@/components/adminPerson/TableData.vue';
import UserDialog from "@/components/adminPerson/UserDialog.vue";
//引入封装的方法
import {
  handleSizeChange,
  handleCurrentChange,
  delUser,
  gain_User,
  resetForm,
  refreshData,
} from "@/assets/js/adminPerson.js";
export default {
  components: {
    UserDialog,
    TableData,
  },
  data() {
    return {
      disable:false,
      //添加用户
      dialogformvisible: false,
      ruleForm: {
        username: "",
        phone_number: "",
        email: "",
        password: "",
        authority: "MERCHANT",
        real_name: "",
        common_name: "",
        department: "",
        class_name: "",
        description: "",
        qq_number: "",
        wechat_number: "",
        gender: "UNKNOWN",
        age: 18,
        login_type: "LOCAL",
      },
      //修改用户
      dialogFormVisibleChange: false,
      loading: false, //是否加载中...
    };
  },
  mounted() {
    // this.$store.dispatch("admin/getData");
    this["fuzzySearchUser"]({
      key: 'authority',
      val: 'MERCHANT',
      page: 0,
      size: 10,
    });
  },
  methods: {
    ...mapActions("admin", [
      "getData",
      "fuzzySearchUser",
      "deleteUser",
      "gainUser",
      "changePage",
    ]),
    handleSizeChange,
    handleCurrentChange,
    delUser,
    gain_User,
    resetForm,
    refreshData,
  },
  computed: {
    ...mapState("admin", [
      "tableData",
      "page",
      "url_data",
      "change_user",
      "formInline",
    ]),
  },
  watch: {
    // 监听mapState中的变量，当数据变化（有值、值改变等），
    // 保证能拿到完整的数据，不至于存在初始化没有数据的问题，然后可以赋给本组件data中的变量
  },
};
</script>
<style  lang='scss' scoped>
@import "@/assets/css/adminPerson_y.scss";
</style>
